<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        /* 修改全局字体 */
        body {
            font-family: 'Roboto', sans-serif;
            background-color: rgb(241, 242, 243);
        }
        .center {
            width: 1400px;
            margin: 0 auto;
        }
        .el-header {
            background-color: white;
        }
        /* 修改菜单项的悬停样式 */
        .el-menu-item:hover {
            background-color: #f06e58;
            color: white;
        }

        #footer_center p {
            margin: 0;
        }

        #footer_center h3 {
            color: white;
        }

        p:hover {
            color: deepskyblue;
        }

        .vodeolist img:hover {
            transform: scale(1.2);
        }

        .el-card a div {
            display: none;
        }

        .el-card a:hover div {
            display: block;
        }

        .play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            background-image: url('img/plyingbutton.jpg');
            background-size: cover;
            opacity: 0;
        }

        a:hover .play-button {
            opacity: 1;
        }

        .el-button:hover {
            background-color: #e65648;
            border-color: #e65648;
        }

        /* 调整轮播图高度 */
        .el-carousel__item {
            height:500px;
        }

        /* 优化课程标题样式 */
        .el-card p {
            font-size: 14px;
            font-weight: 500;
            line-height: 1.5;
            margin-bottom: 0;
        }
        .background{
            background-image: url('http://rvg6mjj7z.hn-bkt.clouddn.com/img/background.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <!--头,引入my-header.js-->
        <my-header></my-header>
        <!--中间,主要内容部分-->
        <div class="background">
            <el-main class="center">
                <!--轮播图开始-->
                <el-carousel height="500px">
                    <el-carousel-item v-for="b in bannerArr">
                        <img :src="b.imgUrl" width="100%">
                    </el-carousel-item>

                </el-carousel>
                <!--轮播图结束,功能完结-->

                <!--*************************************-->
                <!--学习视频资料-->
                <el-row style="background-color: white" >
                    <el-col span="3">
                        <p style="font-size: 28px;line-height: 65px;margin: 0">免费课程</p>
                    </el-col>
                    <el-col span="21">
                        <!--视频导航开始-->
                        <el-menu mode="horizontal" default-active="0" @select="videoSelect" active-text-color="orange">
                            <el-menu-item index="0">全部</el-menu-item>
                            <el-menu-item v-for="c in videoCategoryArr" :index="c.id">{{c.name}}</el-menu-item>
                        </el-menu>
                        <!--视频导航结束-->
                    </el-col>
                </el-row>
                <!--视频列表开始-->
                <el-row gutter="20">
                    <el-col v-for="r in videoArr" span="6">
                        <el-card style="margin: 10px 0">
                            <a class="vodeolist" style="color: #333;text-decoration: none; position: relative; display: inline-block;" :href="'/video.html?bvid='+r.bvid">
                                <img :src="r.imgeurl" width="100%" height="144" style="cursor: pointer;">
                                <div class="play-button"></div>
                                <p style="height: 40px; cursor: pointer;overflow: hidden;
                                      display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical">{{r.coursename}}</p>
                            </a>
                        </el-card>
                    </el-col>
                </el-row>
                <div style="text-align: center;margin-bottom: 20px">
                    <el-button @click="location.href='/contentList.html?paid=0'">点击查看更多视频</el-button>
                </div>
                <!--视频列表结束-->
                <!--视频结束-->
                <!--*************************************-->
                <!--付费课程-->
                <el-row style="background-color: white">
                    <el-col span="3">
                        <p style="font-size: 28px;line-height: 65px;margin: 0">精品课程</p>
                    </el-col>
                    <el-col span="18">
                        <!--视频导航开始-->
                        <el-menu mode="horizontal" default-active="0" @select="courseSelect" active-text-color="orange">
                            <el-menu-item index="0">全部</el-menu-item>
                            <el-menu-item v-for="c in videoCategoryArr" :index="c.id">{{c.name}}</el-menu-item>
                        </el-menu>
                        <!--视频导航结束-->
                    </el-col>
                    <el-col span="3" style="position: absolute; padding: 20px 0; right: 5px;">
                        <!--视频导航开始-->
                        <a href="mycourse.html" style="font-size: 18px;">查看已购买的课程</a>
                        <!--视频导航结束-->
                    </el-col>
                </el-row>
                <el-row gutter="25">
                    <el-col v-for="r in courseArr" span="6">
                        <el-card style="margin: 10px 0">
                            <a  style="color: #333;text-decoration: none; position: relative; display: inline-block;" :href="'/course.html?bvid='+r.bvid">
                                <img :src="r.imgeurl" width="100%" height="144" style="cursor: pointer;">

                                <p style="height: 40px; cursor: pointer;overflow: hidden;
                                      display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical">{{r.coursename}}</p>
                            </a>
                            <div  style="display: inline-block;;color: red;font-size: 20px">
                                ￥: {{r.price}}
                            </div>
                            <div style="color: #cccccc;display: inline-block;margin-left: 70px"><i class="el-icon-user-solid">{{r.boughtnum}}人已购</i></div>
                        </el-card>
                    </el-col>
                </el-row>
                <div style="text-align: center;margin-bottom: 20px">
                    <el-button @click="location.href='/contentList.html?paid=1'">点击查看更多视频</el-button>
                </div>
                <!--付费课程结束-->
                <!-- 返回顶部按钮 -->
                <el-backtop :bottom="100">
                    <div slot="default" style="height: 60px; width: 60px; background-color: #f2f5f6; box-shadow: 0 0 6px rgba(0,0,0, .12); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #1989fa; font-size: 30px; cursor: pointer; transition: background-color .3s ease-in-out;">
                        <el-icon name="arrow-up"></el-icon>
                    </div>
                </el-backtop>
            </el-main>
        </div>

        <!--脚-->
        <el-footer style="height: 350px;background-color: darkgrey;padding:50px 0">
             <my-footer></my-footer>
        </el-footer>

       </el-container>
</div>
</body>
<!--import axios-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--引入自己的js文件-->
<script src="js/my-header.js"></script>
<script src="js/my-footer.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                bannerArr:[],
                recipeArr:[],
                videoCategoryArr:[],
                videoArr:[],
                courseArr:[],

            }
        },
        methods: {
            videoSelect(key,path){
                this.loadContent(key);
            },
            courseSelect(key,path){
                this.courseContent(key);
            },
            loadContent(categoryId){
                //发请求获取数据
                axios.get("/v1/contents/courseindex/0/"+categoryId)
                    .then(function (response) {
                        if (response.data.code == 1)
                            v.videoArr = response.data.data;
                    })
            },

            courseContent(categoryId){
                //发请求获取数据
                axios.get("/v1/contents/paidcourseindex/1/"+categoryId)
                    .then(function (response) {
                        if (response.data.code == 1)
                            v.courseArr = response.data.data;
                    })
            }
        },
        created:function () {
            //发请求获取所有的轮播图数据
            axios.get("/v1/banners/").then(function (response) {
                v.bannerArr = response.data.data;
            })
            //发送视频列表请求
            //请求视频相关分类数据
            axios.get("/v1/categories/video_categories").then(function (response) {
                if (response.data.code == 1){
                    v.videoCategoryArr = response.data.data;
                }
            })
            this.loadContent(0);
            this.courseContent(0);
        }
    })
</script>
</html>